<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$website_name}</title>
<link href="{$templates_root}/style/style_pubilc.css" rel="stylesheet" type="text/css" />
<link href="{$templates_root}/style/style_index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$templates_root}/script/jquery-1.7.1.js"></script>
<script type="text/javascript" src="{$templates_root}/script/cloud-carousel.1.0.5.js"></script>

<script type="text/javascript" src="{$templates_root}/script/pubilc.js"></script>
{literal}
<script>
$(document).ready(function(){
	$('.cloudcarousel').mouseover(function(e) {
        $('.img_description').css({'bottom':($(window).height()/2-150)+'px'}).stop(true,true).animate({left:0,opacity:0.8},500);
		$(this).mouseout(function(e) {
            $('.img_description').stop(true,true).animate({left:-330,opacity:0},500);
        });
    });
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(
		{
			xPos: 500,
			yPos: 45,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text"),
			bringToFront:true,
			reflHeight:50,
			reflOpacity:0.8,
			speed:0.1,
			xRadius:512,
			yRadius:10,
			autoRotate:"right"
		}
	);
});

</script>
{/literal}
<!--[if IE 6]>
	<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->
<!--[if IE 7]>
	<script>alert('您现在使用的是IE7浏览器，请用IE8以上浏览器浏览已达到最佳效果');</script>
<![endif]-->
<!--[if IE 6]>
	<script>alert('您现在使用的是IE6浏览器，请用IE8以上浏览器浏览已达到最佳效果');</script>
<![endif]-->
</head>

<body>
<div class="box">
  {include file='header.tpl'}
  <div class="main">
    <div class="main_top">
      <div class="main_icon">
        <div class="main_title">
          <h1>{$big_title}</h1>
        </div>
        <div class="main_text">
         {$big_text}
        </div>
      </div>
    </div>
    <div class="main_bottom">
      <div class="main_b_title">
        <h2>作品</h2>
      </div>
        <!-- Define left and right buttons. -->
<!--        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />-->
      <div class="works" style="height:240px; position:relative">
<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:1024px; height:240px;overflow:scroll;">
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            {section name=i loop=$arr_img}
            <img class = "cloudcarousel" src="{$templates_root}/uploads/{$arr_img[i].img_url}" width="240" height="150" alt="{$arr_img[i].description}" title="{$arr_img[i].title}"/>
        	{/section}
        </div>
      </div>
      <div class="works_text">
        <div class="the_text">
          <div class="text_title">
            <h3>{$small_l_title}</h3>
          </div>
          <div class="text_con">
            <p>{$small_l_text}</p>
          </div>
        </div>
        <div class="the_text">
          <div class="text_title">
            <h3>{$small_r_title}</h3>
          </div>
          <div class="text_con">
            <p>{$small_r_text}</p>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  {include file='footer.tpl'}
</div>
<div class="img_description" >
  <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text" style="color:#3CC; font-weight:bold; font-size:16px; margin-bottom:10px"></p>
        <p id="alt-text" style="color:#fff"></p>
      </div>
</body>
</html>
